import React,{Component} from 'react';
import {connect} from 'react-redux';
class TodoList extends Component{
    render() {
        return (
            <div>
                <input type="text" value={this.props.inputValue} onChange={this.props.handelChangeValue}/>
                <button>提交</button>
                <ul>
                    {
                        this.props.list.map((item,index) => {
                        return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

// 映射数据
const mapStateToProps = (store) => ({
    inputValue: store.inputValue,
    list: store.list
})

// 改变store数据里的值
const dispatchStateToProps = (dispatch) => ({
    handelChangeValue(e) {
        const {value} = e.target;
        const action = {
            type: 'CHANGE_INPUT_VALUE',
            value
        };
        dispatch(action)
    }
})
export default connect(mapStateToProps,dispatchStateToProps)(TodoList);